import React, { PureComponent } from 'react';
import _ from 'lodash';
import ReactDOM from 'react-dom';
import { Row, Col, message } from 'antd';
import { SecondHeaderC, UploadC } from '../../../comps';
import { connect } from 'dva';
import myStyle from './style.less';

@connect(({ OutsourceInvestMsgMaintainM, loading }) => ({ OutsourceInvestMsgMaintainM, loading }))
export default class AssetPackage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ref: undefined,
      _self: undefined,
      fieldInRow: 4,
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef && this.props.onRef(this);
    // 添加窗口大小的监听
    const dom = ReactDOM.findDOMNode(this);
    this.setState({
      _self: dom,
    });
    window.addEventListener('resize', this.windowChange);
    this.windowChange();
  }

  componentWillUnmount() {
    // 删除窗口大小的监听
    window.removeEventListener('resize', this.windowChange);
  }

  // 窗口大小变更触发
  windowChange = () => {
    const screenWidth = document.documentElement.clientWidth;
    if (screenWidth < 1920) {
      this.setState({
        fieldInRow: 3,
      });
    } else {
      this.setState({
        fieldInRow: 4,
      });
    }
  };

  UNSAFE_componentWillReceiveProps(nextProps) {}

  // 抛出数据
  getInfo = () => {
    return this.state.ref?.getFileList();
  };

  render() {
    const { type, initialData } = this.props;
    return (
      <>
        <SecondHeaderC title='资产包' />
        <Row style={{ marginBottom: '10px' }}>
          {/* 资产包 */}
          <Col span={this.state.fieldInRow == 4 ? 2 : 3} style={{ textAlign: 'right', lineHeight: '32px' }}>
            <span className={myStyle.titleContent}>附件</span>
          </Col>

          <UploadC
            title={'上传附件'}
            type={1}
            value={initialData}
            showUploadList={true}
            disabled={type == '3'} // type=3）详情时，不可编辑
            onUpload={(e) => {
              if (e?.code === null) {
                message.error(e?.mesg);
              }
            }}
            onRef={(e) => this.setState({ ref: e })}
            multiple={true}
          />
        </Row>
      </>
    );
  }
}
